<template>
  <div class="resource">
    <el-card>
      <!-- class="project-list-container" -->
      <div>
        <div class="list-h">
          <i></i>
          <el-form
            :inline="true"
            class="demo-form-inline"
            :model="formInline"
            ref="formRef"
            @submit.prevent
          >
            <el-form-item label="模块" prop="logModuleCode">
              <el-select
                clearable
                class="width-custom120"
                v-model="formInline.logModuleCode"
              >
                <el-option
                  v-for="item in logModuleTypeList"
                  :key="item.dicCode"
                  :value="item.dicCode"
                  :label="item.dicValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="操作方式" prop="opertaorType">
              <el-select
                clearable
                class="width-custom120"
                v-model="formInline.opertaorType"
              >
                <el-option
                  v-for="item in opertaorTypeList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="操作人" prop="operatorName">
              <el-input
                v-model.trim="formInline.operatorName"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="操作时间" prop="">
              <el-date-picker
                class="width-custom220"
                v-model="timeValue"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="handleChangeDate"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
          <el-table
            :data="tableData"
            v-loading="loading"
            border
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          >
            <template #empty>
              <el-empty :image-size="150" description="暂无数据"></el-empty>
            </template>
            <el-table-column type="index" label="序号">
              <template v-slot="scope">
                <span>{{
                  (formInline.pageNum - 1) * formInline.pageSize +
                  scope.$index +
                  1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="logModule" label="模块" width="180">
            </el-table-column>
            <el-table-column prop="operatorName" label="操作人">
            </el-table-column>
            <el-table-column prop="createTime" label="操作时间">
            </el-table-column>
            <el-table-column prop="logType" label="日志类型">
              <template #default="{ row }">
                {{ row.logType === "1" ? "系统日志" : "自定义日志" }}
              </template>
            </el-table-column>
            <el-table-column prop="opertaorType" label="操作方式">
              <template #default="{ row }">
                {{ formatterStatusType(row) }}
              </template>
            </el-table-column>
            <el-table-column label="日志详情" width="160" fixed="right">
              <template #default="{ row }">
                <el-button
                  type="text"
                  @click="handleAdd(row.operatorContent)"
                  v-auth="`/system/log--look`"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-skeleton>
      </div>
      <re-pagination
        :total="total"
        v-show="total > 0"
        v-model:page="formInline.pageNum"
        v-model:limit="formInline.pageSize"
        @pagination="handleSearch"
      />
    </el-card>

    <el-drawer
      size="35%"
      v-model="drawer"
      :before-close="handleClose"
      destroy-on-close
      custom-class="demo-drawer"
    >
      <template #title>
        <div class="demo-drawer__header">日志详情</div>
      </template>
      <div class="demo-drawer__content">
        <!-- {{ logInfo }} -->
        <div v-html="logInfo"></div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
// import RePagination from "/@/components/RePagination/index.vue";
// import NotifMessage from "/@/utils/message/notification";
import { postLogList, postDictList } from "/@/api/log";

export default defineComponent({
  name: "LogList",
  // components: {
  //   RePagination
  // },
  setup() {
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let loading = ref<boolean>(false);
    let timeValue = ref(null);

    let formInline = reactive({
      logModuleCode: "",
      opertaorType: "",
      operatorName: "",
      pageSize: 10,
      pageNum: 1,
      startTime: "",
      endTime: ""
    });
    let total = ref<number>(0);
    let drawer = ref<boolean>(false);
    let state = reactive({
      tableData: []
    });
    let logInfo = ref("");

    const opertaorTypes = new Map([
      ["1", "新增"],
      ["2", "修改"],
      ["3", "删除"],
      ["4", "查询"]
    ]);

    const opertaorTypeList = ref([
      { value: "1", label: "新增" },
      { value: "2", label: "修改" },
      { value: "3", label: "删除" },
      { value: "4", label: "查询" }
    ]);

    let logModuleTypeList = ref([]);

    // 请求表格数据
    async function getTableData(obj: object = {}) {
      loading.value = true;
      try {
        const { code, data } = await postLogList(obj);
        if (code === 200) {
          total.value = data.rows;
          state.tableData = data.list;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    }

    const handleChangeDate = item => {
      if (item) {
        formInline.startTime = item[0];
        formInline.endTime = item[1];
      } else {
        formInline.startTime = "";
        formInline.endTime = "";
      }
    };

    // 打开添加弹窗
    const handleAdd = info => {
      drawer.value = true;
      logInfo.value = info;
    };

    // 关闭抽屉弹框
    const handleClose = () => {
      drawer.value = false;
    };

    // 重置条件
    const handleReset = (): void => {
      formRef.value.resetFields();
      handleChangeDate(null);
      formInline.pageNum = 1;
    };

    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData(formInline);
    };

    const formatterStatusType = row => {
      return opertaorTypes.get(row.opertaorType);
    };

    const initLogTypeList = async () => {
      try {
        const params = {
          dicType: "opr_rec_type"
        };
        const { code, data } = await postDictList(params);
        logModuleTypeList.value = data;
        console.log(code, data);
      } catch (err) {
        console.log(err);
      }
    };

    // 请求数据
    initLogTypeList();
    getTableData();
    return {
      ...toRefs(state),
      total,
      drawer,
      formInline,
      formRef,
      loading,
      timeValue,
      logInfo,
      logModuleTypeList,
      opertaorTypeList,
      formatterStatusType,
      handleChangeDate,
      handleAdd,
      handleClose,
      handleReset,
      handleSearch
    };
  }
});
</script>
<style lang="scss" scoped>
.resource {
  .wrap_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    .el-button {
      width: 100%;
      border: 1px dashed gray;
    }
  }
  .demo-drawer {
    .demo-drawer__header {
      line-height: 58px;
      padding-left: 15px;
      font-size: 14px;
      font-weight: 600;
      color: #606266;
    }
    .demo-drawer__content {
      height: calc(100vh - 60px);
      width: 100%;
      padding: 10px;
      border-top: 1px solid rgba(0, 21, 41, 0.15);
      word-wrap: break-word;
      overflow-y: auto;
    }
  }
  :deep .el-drawer__header {
    margin-bottom: 0px;
    padding-top: 0;
  }
  :deep .el-drawer__body {
    padding: 0;
  }
}
</style>
